<template>
  <div class="wrap">
    <template v-if="status === 0">
      <Image :name="successImage" height="240" width="208" />
      <div class="tip">您的资料已提交</div>
      <div class="status">正在努力开户中...</div>
      <div class="back" @tap="Router.back(backNum)">返回合作主体管理</div>
    </template>
    <template v-else>
      <Image :name="errorImage" height="240" width="208" />
      <div class="tip">您提交的资料已驳回, 驳回理由</div>
      <div v-for="(item, index) in getFailReasonList()" :key="index" class="status">
        {{ item }}
      </div>
      <div class="back" @tap="Router.back(2)">返回合作主体管理</div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Router, onLoad, onShow } from '@U/common'
import Image from '@C/Image.vue'

const successImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/status_icon/success.png`
const errorImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/status_icon/error.png`

const businessType: any = ref(0)
// 开户成功进入不到当前页面，所以不用判断 '开户成功' 状态
const status = ref(0) // 0 开户中，1 被驳回;
const reason = ref()
const backNum = ref<number>()

const getStatus = () => {
  if (businessType.value === 0) {
    if (Router.route().params.memberStatus === (2 || 3)) status.value = 0
    else if (Router.route().params.memberStatus === 4) {
      reason.value = Router.route().params.failureReason
      status.value = 1
    }
  } else if (businessType.value === 1) {
    if (Router.route().params.noInvoiceOpenStatus === (1 || 2)) status.value = 0
    else if (Router.route().params.noInvoiceOpenStatus === 3) {
      reason.value = Router.route().params.failureReason
      status.value = 1
    }
  }
}

const getFailReasonList = () => {
  let failArr = []
  console.log('reason.value', reason.value)
  failArr = reason.value.split(',')
  console.log('failArr', failArr)
  return failArr
}
onLoad(() => {
  businessType.value = Router.route().params.businessType
  backNum.value = Router.route().params.toType
  getStatus()
})
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 28rpx;
  padding-top: 260rpx;
  .tip {
    margin-top: 24rpx;
  }
  .status {
    height: 64rpx;
    font-weight: 500;
    margin-top: 32rpx;
  }
  .back {
    width: 360rpx;
    height: 84rpx;
    line-height: 84rpx;
    border: 2rpx solid #1890ff;
    border-radius: 42rpx;
    color: #1890ff;
    text-align: center;
    margin-top: 72rpx;
  }
}
</style>
